<template>
  <div id="wrapper">
    <el-row>
        <el-col :xs="24" :sm="24" :lg="24" class="primary">版本发布记录</el-col>
    </el-row>
    <el-row>
        <el-col :xs="24" :sm="24" :lg="24" class="border"></el-col>
    </el-row>
    <div @click="goBack" class="back">
      <el-tooltip class="item" effect="dark" content="返回上一级" placement="right">
        <img src="../../assets/back.png" alt="">
      </el-tooltip>      
    </div>
    <div class="block">
      <el-timeline class="list" v-infinite-scroll="load" :infinite-scroll-disabled="disabled">
        <el-timeline-item :timestamp="item.online_time" placement="top" :key="index" v-for="(item, index) in list">
          <el-card>
            <h4>版本{{ item.version_no }}&nbsp;&nbsp;(<span>上线时间: {{ item.online_time }} </span>)</h4>
            <h4 v-if="item.details.requirement">合入的需求:
              <p class="col" :key="key" v-for="(val, key) in item.details.requirement">{{ val.serial_number }}:{{ val.title }}</p>
            </h4>
            <h4 v-if="item.details.optimize">合入的优化:
              <p class="col" :key="key" v-for="(val, key) in item.details.optimize">{{ val.serial_number }}:{{ val.title }}</p>
            </h4>
            <h4 v-if="item.details.bug">合入的缺陷:
              <p class="col" :key="key" v-for="(val, key) in item.details.bug">{{ val.serial_number }}:{{ val.title }}</p>
            </h4>
          </el-card>
        </el-timeline-item>       
      </el-timeline>
      <p v-loading="loading" element-loading-text="加载中..."></p>
      <p v-if="noMore" class="noMore">没有更多了</p>
    </div>
  </div>
</template>

<script>
import http from '@/views/sys/axios' 

export default {
  name: 'Publish',
  data() {
    return {
      count: 10,
      loading: false,
      current: 1,
      has_next: false,
      list: []
    }
  },
  computed: {
    noMore () {
      return this.has_next ? false : true
    },
    disabled () {
      return this.loading || this.noMore
    }
  },
  created() {
    this.init()
  },
  methods: {
    goBack() {
      this.$router.go(-1)
    },
    init() {
      http.get(`/api/base/release/data?page=${this.current}`).then(res => {
        if(res.code == 200) {          
          this.has_next = res.has_next
          this.loading = false
          if(this.current == 1) {
            this.list = res.details
          } else {
            this.list = this.list.concat(res.details)
          }
        }       
      }).catch(error => {
        console.log(error)
      })
    },
    load () {
      this.loading = true
      this.current += 1
      this.init()
    }
  }
}
</script>

<style lang="scss" scoped>
  #wrapper{
    padding: 50px;
    position: relative;
    .back{
      position: absolute;
      left: 10px;
      top: 20px;
      width: 20px;
      height: 20px;
      cursor: pointer;
      img{
        width: 100%;
      }
    }
    .block{
      .list{
        height: 700px;
        overflow-y: auto;
        .col{
          color: #999;
        }
      }
      ::-webkit-scrollbar{
        display:none;
      }
    }
    .noMore{
      color: #1890ff;
    }
  }
  .border{
      box-sizing: content-box;
      height: 0;
      overflow: visible;
      margin-top: 1rem;
      margin-bottom: 1rem;
      border: 0;
      border-top: 1px solid rgba(0,0,0,.1);
  }
  .primary{
      color: #409EFF;
      font-size: 30px;
      margin-top: 20px;
      margin-bottom: 10px;
      font-weight: 400;
  }
  .marT{
      margin-top: 20px;
  }
</style>